<!DOCTYPE html >
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<title>登录</title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" title="" rel="stylesheet" />
<style>
	
@keyframes cc{
	0%{opacity: 0.4;transform: scale(0.1) ;top: -500px;}
	50%{opacity: 0.4;transform: scale(0.1) rotateX(90deg);top: -50px;}
	100%{opacity: 1;transform: scale(1) rotateX(0deg);top: 0;}
}
@media only screen and (max-width: 500px) {
	.login{
		width: 95%!important;
	}
	.sr{
	padding:30px 70px!important;
    }
}
html,body{
	height:100%;
	width:100%;
	background: url(//s10.realdtech.com/img/loginbg1.jpg) no-repeat center center;
	background-size:1920px 1000px;
	perspective:500px;
}
*{
		font-family:"仿宋";
}
.layui-form-danger{
	border-color:transparent;
}
.login{
	width:450px;
	position: relative;
	top: 0;
	margin: 15% auto;
	background:rgba(255,255,255,1);
	border-radius: 10px;
    color: #27d;
    animation: cc 4s ease-in-out ;
}
.login header{
	
    padding: 10px;
    border-bottom: 1px solid #27d;
}
.login header h1{
	margin:0;
	padding:0;
	text-align: center;
    font-size: 25px;
    line-height: 40px;
}
.sr{
	padding:30px 90px;
}
.name{
	position:relative;
	margin-bottom:20px;
	clear:both;
	border:1px solid #27d;
	width: 100%;
    height: 40px;
}

.name label{
	position: absolute;
    color: #27d;
    top: 10px;
    left: 10px;
}
.name_inp{
	padding-left: 34px;
	height: 38px;
    line-height: 38px;
    line-height: 36px\9;
    border: none;
    background-color: #fff;
   width:100%;
   outline:none;
}
.dl{
	width:150px;
	height:40px;
	background:#27d;
	line-height:40px;
	display:block;
	margin:0 auto;
	color:#fff;
	border:0;
	font-size:18px;
	margin-top:10px;
}
input[type=checkbox], input[type=radio]{
	margin:0 0 0;
}
.checkbox input[type=checkbox], .checkbox-inline input[type=checkbox], .radio input[type=radio], .radio-inline input[type=radio]{
	margin-left:0;
	margin-top:5px;
}
.checkbox span{
	margin-left: 15px;
}

</style>

</head>

<body>
  
  <div style="height:1px;"></div>
  <div class="login">
     <header>
	    <h1>登录</h1>
	 </header>
	 <div class="sr">
	    <form id="form" action="/admin/register" method="post">
			<input type="hidden" name="loginToken" value="#(loginToken??)">
		    <div class="name">
				<label>
				<i class="sublist-icon glyphicon glyphicon-user"></i>
				</label>
				<input type="text"  placeholder="这里输入登录名" name="username" id="username" class="name_inp">
			</div>
			 <div class="name">
				<label>
				<i class="sublist-icon glyphicon glyphicon-pencil"></i>
				</label>
				<input type="password"  placeholder="这里输入登录密码" name="password" id="password" class="name_inp">
			</div>
			<div class="checkbox">
			<input type="checkbox" id="checkbox"><span>自动登录</span>
			</div>
			<button class="dl" id="login">登录</button>
		</form>
	 </div>
  </div>
</body>
<script type="text/javascript" src="//static1.finchain.cc/lib/easyui/v1.5.1/jquery.min.js"></script>
<script src="//static1.finchain.cc/jquery.form.js"></script>
<script src="//cdn.bootcss.com/layer/3.0.1/layer.min.js"></script>
<script>
	 $('#form').submit(function() {
   		if(!$(".name_inp").val()){
   			layer.alert("请输入用户名");
   			return false;
   		}
   		console.log($("#password").val().length)
        if($("#password").val().length < 6) {
            layer.alert('密码不能少于6个字符');
            return false;
        }
	});
</script>
</html>
